.d-header {
  &-wrap {
    position: fixed;
    width: 100%;
  }
  box-sizing: content-box;
  height: 3rem;
  padding: 0.75rem 0;

  background-color: var(--neutral-100);
  border-bottom: 1px solid var(--neutral-90);
  box-shadow: none;

  .header-sidebar-toggle {
    display: none;
  }

  .wrap {
    .contents {
      @include breakpoint(large) {
        display: flex;
      }

      display: grid;
      grid-template-areas: "logo search utility";
      grid-template-columns: 19rem var(--column-content) var(--column-blocks);
      gap: 2rem;
      @media screen and (max-width: 1080px) {
        grid-template-columns: auto var(--column-content) var(--column-blocks);
        gap: 1rem;
      }
    }
  }

  .hamburger-dropdown {
    display: none;
  }

  .home-logo-wrapper-outlet {
    grid-area: logo;
    display: flex;
    flex-shrink: 0;
  }

  .d-header-mode {
    grid-area: logo;
    justify-self: end;
  }

  .extra-info-wrapper {
    grid-area: search;
  }

  .panel {
    grid-area: utility;
  }

  .d-header-icons {
    margin: 0;

    .badge-notification {
      border: 2px solid var(--neutral-100);
      background: var(--primary-50);
      color: var(--neutral-100);
      padding: 0 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      min-width: calc(1rem + 2px);
      height: calc(1rem + 2px);
      top: 0;
      right: 0;
      @include label-small;
    }

    li:has(.ai-bot-button) {
      display: none;
    }

    li.c-user {
      order: 9;
    }

    li > button,
    li > .icon {
      @include hover;

      box-sizing: border-box;
      width: 2.5rem;
      height: 2.5rem;
      padding: 0;

      color: var(--neutral-10);

      background: none;
      border: 0;
      border-radius: var(--rounded-full);

      transition: none;

      &:hover {
        color: inherit;
        background: inherit;
        border: 0;
      }

      .avatar {
        width: 2rem;
        height: 2rem;
      }
    }

    .active {
      .icon {
        background-color: var(--neutral-95);
        border: 0;

        &::after {
          content: unset;
        }
      }
    }

    li.search-dropdown {
      order: -2;
    }

    li.chat-header-icon {
      @include breakpoint(tablet) {
        display: none;
      }
    }

    li.c-create {
      order: -1;
      .d-icon {
        color: var(--primary);
      }
    }

    li.user-menu-panel {
      img.avatar {
        display: none;
      }
    }
  }
}

.c-create__menu {
  a {
    color: var(--neutral-10);
  }
}

.search-header--visible {
  .panel .header-dropdown-toggle.search-dropdown,
  .panel .search-menu {
    @include breakpoint(tablet) {
      display: flex;
    }

    display: none;
  }

  .before-header-panel-outlet {
    @include breakpoint(tablet) {
      display: none;
    }

    flex: 1 1 auto;
  }
}

.d-header-icons {
  .header-dropdown-toggle {
    > .btn {
      .d-icon {
        color: var(--primary);
      }
      .discourse-no-touch & {
        &:hover {
          .d-icon {
            color: var(--primary);
          }
        }
      }
    }
  }

  li {
    > .btn .d-icon, // default button 
    > svg {
      height: 0.75em;
    }
    > .btn .d-icon-far-edit {
      height: 0.6em; // more consistent edit icon size
    }
  }
}

.header-dropdown-toggle.current-user {
  display: flex;
  align-items: center;
  > .d-icon-bell {
    position: absolute;
    color: var(--primary);
  }
}

.menu-panel {
  border: none;
  border-radius: var(--rounded-md);
}
